<template>
  <div class="background-editor">
    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 左侧产品图片区域 -->
      <div class="left-sidebar">
        <!-- 示例视频 -->
        <div class="example-video-section">
          <h3 class="section-title">万物迁移效果示例</h3>
          <div class="example-video-container">
            <div class="video-wrapper">
              <video
                ref="exampleVideoRef"
                class="example-video"
                :src="exampleVideoUrl"
                preload="metadata"
                @play="onVideoPlay"
                @pause="onVideoPause"
                @ended="onVideoEnded"
              >
                您的浏览器不支持视频播放。
              </video>
              <div 
                v-if="!isVideoPlaying" 
                class="play-overlay"
                @click="handleExampleVideoClick"
              >
                <div class="play-button">
                  <el-icon size="20"><VideoPlay /></el-icon>
                </div>
                <div class="play-text">点击播放示例</div>
              </div>
            </div>
            <div class="video-description">
              <p>观看示例视频，了解万物迁移效果</p>
              <p class="video-tips">💡 提示：上传产品图和背景图，系统将自动替换产品背景</p>
            </div>
          </div>
        </div>

        <div class="product-section">
          <h3 class="section-title">产品图片</h3>
          <div class="product-upload-area">
            <el-upload
              ref="productUploadRef"
              class="product-upload"
              :show-file-list="false"
              :on-change="handleProductImageChange"
              accept="image/*"
            >
              <div v-if="!productImageUrl" class="upload-placeholder">
                <div class="upload-icon">☁️</div>
                <div class="upload-text">点击上传图片</div>
              </div>
              <img v-else :src="productImageUrl" class="product-preview" />
            </el-upload>
          </div>
        </div>
      </div>

      <!-- 右侧背景选择区域 -->
      <div class="right-content">
        <!-- 背景选择Tab -->
        <div class="background-tabs">
          <div 
            class="background-tab" 
            :class="{ active: activeTab === 'image' }"
            @click="activeTab = 'image'"
          >
            图片背景
          </div>
          <div 
            class="background-tab" 
            :class="{ active: activeTab === 'prompt' }"
            @click="activeTab = 'prompt'"
          >
            提示词背景
          </div>
        </div>

        <!-- 背景选择内容 -->
        <div class="background-content">
          <!-- 图片背景Tab -->
          <div v-if="activeTab === 'image'" class="image-background-tab">
            <!-- 我的背景 -->
            <div class="background-section">
              <div class="section-header">
                <h3>我的背景</h3>
              </div>
              <div class="background-grid">
                <div class="upload-item" @click="triggerModelImageUpload">
                  <div class="upload-plus">+</div>
                </div>
                <div 
                  v-for="(bg, index) in myBackgrounds" 
                  :key="index"
                  class="background-item"
                  :class="{ selected: selectedBackground === bg.url }"
                  @click="selectBackground(bg.url)"
                >
                  <img :src="bg.url" :alt="bg.name" />
                </div>
              </div>
            </div>

            <!-- 预设背景分类 -->
            <div 
              v-for="category in backgroundCategories" 
              :key="category.name"
              class="background-section"
            >
              <div class="section-header">
                <h3>{{ category.name }}</h3>
              </div>
              <div class="background-grid">
                <div 
                  v-for="(bg, index) in category.backgrounds" 
                  :key="index"
                  class="background-item"
                  :class="{ selected: selectedBackground === bg.url }"
                  @click="selectBackground(bg.url)"
                >
                  <img :src="bg.url" :alt="bg.name" />
                </div>
              </div>
            </div>
          </div>

          <!-- 提示词背景Tab -->
          <div v-if="activeTab === 'prompt'" class="prompt-background-tab">
            <div class="prompt-container">
              <div class="prompt-input-section">
                <h3>输入提示词生成背景</h3>
                <div class="prompt-input-wrapper">
                  <el-input
                    v-model="promptText"
                    type="textarea"
                    :rows="4"
                    placeholder="描述你想要的背景，例如：现代简约的客厅，柔和的自然光线，米色沙发，绿植装饰"
                    class="prompt-input"
                  />
                  <el-button 
                    type="primary" 
                    class="generate-prompt-btn"
                    :loading="isGeneratingBackground"
                    @click="generateBackgroundFromPrompt"
                  >
                    <el-icon><Brush /></el-icon>
                    生成背景
                  </el-button>
                </div>
              </div>
              
              <!-- 生成的背景展示 -->
              <div v-if="generatedBackgrounds.length > 0" class="generated-section">
                <h3>生成的背景</h3>
                <div class="background-grid">
                  <div 
                    v-for="(bg, index) in generatedBackgrounds" 
                    :key="index"
                    class="background-item"
                    :class="{ selected: selectedBackground === bg.url }"
                    @click="selectBackground(bg.url)"
                  >
                    <img :src="bg.url" :alt="'生成的背景' + (index + 1)" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部生成按钮 -->
    <div class="bottom-action">
      <el-button type="primary" class="generate-btn" :disabled="!productImageUrl || !selectedBackground" @click="handleGenerate">
        <span class="generate-icon">1</span>
        生成
      </el-button>
    </div>

    <!-- 隐藏的文件上传 -->
    <el-upload
      ref="modelUploadRef"
      style="display: none;"
      :show-file-list="false"
      :on-change="handleModelImageChange"
      accept="image/*"
    />
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElLoading } from 'element-plus'
import { Upload, Delete, VideoPlay, Plus, Brush, Download } from '@element-plus/icons-vue'
import { apiRequest, API_CONFIG } from '@/config/api'

const router = useRouter()

// 示例视频相关
const exampleVideoUrl = ref('https://jianji-api.oss-cn-shanghai.aliyuncs.com/anyshoot.mp4')
const exampleVideoRef = ref(null)
const isVideoPlaying = ref(false)

// 图片相关
const productImageUrl = ref('')
const modelImageUrl = ref('')
const productUploadRef = ref(null)
const modelUploadRef = ref(null)
const productCanvasRef = ref(null)
const canvasRef = ref(null)
const modelImageRef = ref(null)

// 遮罩相关
const productMaskCanvas = ref(null)
const modelMaskCanvas = ref(null)
const originalProductSize = ref({ width: 0, height: 0 })
const originalModelSize = ref({ width: 0, height: 0 })

// 绘图相关
const tool = ref('brush')
const brushSize = ref(20)
const drawingState = reactive({
  drawing: false,
  lastX: 0,
  lastY: 0
})

// Tab切换相关
const activeTab = ref('image')

// 背景选择相关
const selectedBackground = ref('')
const promptText = ref('')
const isGeneratingBackground = ref(false)
const myBackgrounds = ref([])
const generatedBackgrounds = ref([])

// 预设背景分类 - 统一的背景图片库
const backgroundCategories = ref([
  {
    name: 'General Display',
    backgrounds: [
      // 化妆品展示
      { name: '化妆品展示1', url: 'https://via.placeholder.com/300x200/f5f5f5/666?text=Cosmetic+1' },
      { name: '化妆品展示2', url: 'https://via.placeholder.com/300x200/e8e8e8/666?text=Cosmetic+2' },
      { name: '化妆品展示3', url: 'https://via.placeholder.com/300x200/f0f0f0/666?text=Cosmetic+3' },
      { name: '化妆品展示4', url: 'https://via.placeholder.com/300x200/efefef/666?text=Cosmetic+4' },
      { name: '化妆品展示5', url: 'https://via.placeholder.com/300x200/f8f8f8/666?text=Cosmetic+5' },
      { name: '化妆品展示6', url: 'https://via.placeholder.com/300x200/f2f2f2/666?text=Cosmetic+6' },
      { name: '化妆品展示7', url: 'https://via.placeholder.com/300x200/f6f6f6/666?text=Cosmetic+7' },
      { name: '化妆品展示8', url: 'https://via.placeholder.com/300x200/f4f4f4/666?text=Cosmetic+8' },
      // 丝绸质感
      { name: '丝绸背景1', url: 'https://via.placeholder.com/300x200/ffeaa7/666?text=Silk+1' },
      { name: '丝绸背景2', url: 'https://via.placeholder.com/300x200/fab1a0/666?text=Silk+2' },
      { name: '丝绸背景3', url: 'https://via.placeholder.com/300x200/e17055/666?text=Silk+3' },
      { name: '丝绸背景4', url: 'https://via.placeholder.com/300x200/fdcb6e/666?text=Silk+4' },
      { name: '丝绸背景5', url: 'https://via.placeholder.com/300x200/e84393/666?text=Silk+5' },
      { name: '丝绸背景6', url: 'https://via.placeholder.com/300x200/fd79a8/666?text=Silk+6' },
      { name: '丝绸背景7', url: 'https://via.placeholder.com/300x200/fdcb6e/666?text=Silk+7' },
      { name: '丝绸背景8', url: 'https://via.placeholder.com/300x200/e84393/666?text=Silk+8' },
      // 家居场景
      { name: '家居场景1', url: 'https://via.placeholder.com/300x200/74b9ff/fff?text=Home+1' },
      { name: '家居场景2', url: 'https://via.placeholder.com/300x200/0984e3/fff?text=Home+2' },
      { name: '家居场景3', url: 'https://via.placeholder.com/300x200/6c5ce7/fff?text=Home+3' },
      { name: '家居场景4', url: 'https://via.placeholder.com/300x200/a29bfe/fff?text=Home+4' },
      { name: '家居场景5', url: 'https://via.placeholder.com/300x200/fd79a8/fff?text=Home+5' },
      { name: '家居场景6', url: 'https://via.placeholder.com/300x200/fdcb6e/666?text=Home+6' },
      { name: '家居场景7', url: 'https://via.placeholder.com/300x200/55a3ff/fff?text=Home+7' },
      { name: '家居场景8', url: 'https://via.placeholder.com/300x200/81ecec/666?text=Home+8' },
      // 水元素
      { name: '水元素1', url: 'https://via.placeholder.com/300x200/00b894/fff?text=Water+1' },
      { name: '水元素2', url: 'https://via.placeholder.com/300x200/00cec9/fff?text=Water+2' },
      { name: '水元素3', url: 'https://via.placeholder.com/300x200/74b9ff/fff?text=Water+3' },
      { name: '水元素4', url: 'https://via.placeholder.com/300x200/0984e3/fff?text=Water+4' },
      { name: '水元素5', url: 'https://via.placeholder.com/300x200/00b894/fff?text=Water+5' },
      { name: '水元素6', url: 'https://via.placeholder.com/300x200/81ecec/666?text=Water+6' },
      { name: '水元素7', url: 'https://via.placeholder.com/300x200/74b9ff/fff?text=Water+7' },
      { name: '水元素8', url: 'https://via.placeholder.com/300x200/00cec9/fff?text=Water+8' },
      // 沙石质感
      { name: '沙石背景1', url: 'https://via.placeholder.com/300x200/d63031/fff?text=Sand+1' },
      { name: '沙石背景2', url: 'https://via.placeholder.com/300x200/e17055/fff?text=Sand+2' },
      { name: '沙石背景3', url: 'https://via.placeholder.com/300x200/fdcb6e/666?text=Sand+3' },
      { name: '沙石背景4', url: 'https://via.placeholder.com/300x200/e84393/fff?text=Sand+4' },
      { name: '沙石背景5', url: 'https://via.placeholder.com/300x200/f39c12/fff?text=Sand+5' },
      { name: '沙石背景6', url: 'https://via.placeholder.com/300x200/e67e22/fff?text=Sand+6' },
      { name: '沙石背景7', url: 'https://via.placeholder.com/300x200/d35400/fff?text=Sand+7' }
    ]
  }
])

// 示例视频控制
function handleExampleVideoClick() {
  if (exampleVideoRef.value) {
    exampleVideoRef.value.play()
  }
}

function onVideoPlay() {
  isVideoPlaying.value = true
}

function onVideoPause() {
  isVideoPlaying.value = false
}

function onVideoEnded() {
  isVideoPlaying.value = false
}

// 产品图上传处理
function handleProductImageChange(file) {
  const reader = new FileReader()
  reader.onload = (e) => {
    productImageUrl.value = e.target.result
    const img = new Image()
    img.onload = () => {
      originalProductSize.value = { width: img.width, height: img.height }
      // 创建产品图遮罩画布
      productMaskCanvas.value = document.createElement('canvas')
      productMaskCanvas.value.width = img.width
      productMaskCanvas.value.height = img.height
      const ctx = productMaskCanvas.value.getContext('2d')
      ctx.fillStyle = 'black'
      ctx.fillRect(0, 0, img.width, img.height)
    }
    img.src = e.target.result
  }
  reader.readAsDataURL(file.raw)
}

// 背景图上传处理
function handleModelImageChange(file) {
  const reader = new FileReader()
  reader.onload = (e) => {
    modelImageUrl.value = e.target.result
    const img = new Image()
    img.onload = () => {
      originalModelSize.value = { width: img.width, height: img.height }
      // 创建背景图遮罩画布
      modelMaskCanvas.value = document.createElement('canvas')
      modelMaskCanvas.value.width = img.width
      modelMaskCanvas.value.height = img.height
      const ctx = modelMaskCanvas.value.getContext('2d')
      ctx.fillStyle = 'black'
      ctx.fillRect(0, 0, img.width, img.height)
      
      // 调整画布尺寸
      resizeCanvasToImage()
    }
    img.src = e.target.result
    modelImageRef.value = img
  }
  reader.readAsDataURL(file.raw)
}

// 触发背景图上传
function triggerModelImageUpload() {
  if (modelUploadRef.value) {
    modelUploadRef.value.$el.querySelector('input[type="file"]').click()
  }
}

// 调整画布尺寸
function resizeCanvasToImage() {
  const canvas = canvasRef.value
  const img = modelImageRef.value
  if (!canvas || !img) return
  
  const maxWidth = 500
  const maxHeight = 580
  let { width, height } = img
  
  if (width > maxWidth || height > maxHeight) {
    const ratio = Math.min(maxWidth / width, maxHeight / height)
    width *= ratio
    height *= ratio
  }
  
  canvas.width = width
  canvas.height = height
  
  // 绘制背景图
  const ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0, width, height)
}

// 清除背景图
function clearModelImage() {
  modelImageUrl.value = ''
  modelImageRef.value = null
  originalModelSize.value = { width: 0, height: 0 }
  
  const canvas = canvasRef.value
  if (canvas) {
    const ctx = canvas.getContext('2d')
    ctx.clearRect(0, 0, canvas.width, canvas.height)
  }
  
  ElMessage.success('已清除背景图')
}

// 获取产品图画布位置
function getProductPos(e) {
  const rect = productCanvasRef.value?.getBoundingClientRect()
  if (!rect) return null
  const clientX = e.touches ? e.touches[0].clientX : e.clientX
  const clientY = e.touches ? e.touches[0].clientY : e.clientY
  return {
    x: clientX - rect.left,
    y: clientY - rect.top,
  }
}

// 开始产品图绘制
function startProductDraw(e) {
  if (!productImageUrl.value) return
  e.preventDefault()
  const pos = getProductPos(e)
  if (!pos) return
  
  drawingState.drawing = true
  drawingState.lastX = pos.x
  drawingState.lastY = pos.y
  
  // 设置画笔样式
  const ctx = productCanvasRef.value?.getContext('2d')
  if (ctx) {
    ctx.globalAlpha = 0.7
    ctx.globalCompositeOperation = tool.value === 'brush' ? 'source-over' : 'destination-out'
  }
}

// 产品图绘制过程
function drawingProduct(e) {
  if (!drawingState.drawing || !productImageUrl.value) return
  e.preventDefault()
  
  const pos = getProductPos(e)
  if (!pos) return
  
  // 在可见画布上绘制
  drawOnProductCanvas(drawingState.lastX, drawingState.lastY, pos.x, pos.y)
  
  // 更新产品图遮罩
  updateProductMask(drawingState.lastX, drawingState.lastY, pos.x, pos.y)
  
  drawingState.lastX = pos.x
  drawingState.lastY = pos.y
}

// 在产品画布上绘制
function drawOnProductCanvas(lastX, lastY, x, y) {
  const canvas = productCanvasRef.value
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  ctx.lineCap = 'round'
  ctx.lineJoin = 'round'
  ctx.lineWidth = brushSize.value
  ctx.strokeStyle = tool.value === 'brush' ? 'rgba(255, 255, 255, 0.7)' : 'transparent'
  
  ctx.beginPath()
  ctx.moveTo(lastX, lastY)
  ctx.lineTo(x, y)
  ctx.stroke()
}

// 更新产品图遮罩
function updateProductMask(lastX, lastY, x, y) {
  if (!productMaskCanvas.value) return
  
  const maskCtx = productMaskCanvas.value.getContext('2d')
  const scaleX = originalProductSize.value.width / 350 // 产品图显示尺寸为350x350
  const scaleY = originalProductSize.value.height / 350
  
  maskCtx.lineCap = 'round'
  maskCtx.lineJoin = 'round'
  maskCtx.lineWidth = brushSize.value * Math.max(scaleX, scaleY)
  maskCtx.strokeStyle = tool.value === 'brush' ? 'white' : 'black'
  
  maskCtx.beginPath()
  maskCtx.moveTo(lastX * scaleX, lastY * scaleY)
  maskCtx.lineTo(x * scaleX, y * scaleY)
  maskCtx.stroke()
}

// 结束绘制
function endDraw() {
  drawingState.drawing = false
  // 恢复默认
  const productCtx = productCanvasRef.value?.getContext('2d')
  if (productCtx) {
    productCtx.globalAlpha = 1
    productCtx.globalCompositeOperation = 'source-over'
  }
}

// 生成处理
async function handleGenerate() {
  if (!productImageUrl.value || !modelImageUrl.value) {
    ElMessage.error('请先上传产品图和背景图')
    return
  }

  const loading = ElLoading.service({
    lock: true,
    text: '正在生成万物迁移效果...',
    background: 'rgba(0, 0, 0, 0.7)'
  })

  try {
    // 这里添加具体的生成逻辑
    ElMessage.success('生成成功！')
  } catch (error) {
    console.error('生成失败：', error)
    ElMessage.error('生成失败，请重试')
  } finally {
    loading.close()
  }
}

// 选择背景
function selectBackground(url) {
  selectedBackground.value = url
  modelImageUrl.value = url
  
  // 创建图片对象来获取原始尺寸
  const img = new Image()
  img.onload = () => {
    originalModelSize.value = { width: img.width, height: img.height }
    // 创建背景图遮罩画布
    modelMaskCanvas.value = document.createElement('canvas')
    modelMaskCanvas.value.width = img.width
    modelMaskCanvas.value.height = img.height
    const ctx = modelMaskCanvas.value.getContext('2d')
    ctx.fillStyle = 'black'
    ctx.fillRect(0, 0, img.width, img.height)
  }
  img.src = url
  modelImageRef.value = img
  
  ElMessage.success('背景已选择')
}

// 通过提示词生成背景
async function generateBackgroundFromPrompt() {
  if (!promptText.value.trim()) {
    ElMessage.error('请输入提示词')
    return
  }

  isGeneratingBackground.value = true
  const loading = ElLoading.service({
    lock: true,
    text: '正在生成背景图...',
    background: 'rgba(0, 0, 0, 0.7)'
  })

  try {
    // 模拟生成背景图
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    // 模拟生成的背景图（实际应该调用AI生成接口）
    const mockGeneratedImages = [
      { url: `https://via.placeholder.com/800x600/f39c12/fff?text=Generated+1`, name: '生成背景1' },
      { url: `https://via.placeholder.com/800x600/e74c3c/fff?text=Generated+2`, name: '生成背景2' },
      { url: `https://via.placeholder.com/800x600/3498db/fff?text=Generated+3`, name: '生成背景3' },
      { url: `https://via.placeholder.com/800x600/2ecc71/fff?text=Generated+4`, name: '生成背景4' }
    ]
    
    generatedBackgrounds.value = mockGeneratedImages
    ElMessage.success('背景生成成功！')
    
    // 自动选择第一张生成的图片
    if (mockGeneratedImages.length > 0) {
      selectBackground(mockGeneratedImages[0].url)
    }
    
  } catch (error) {
    console.error('生成背景失败：', error)
    ElMessage.error('生成背景失败，请重试')
  } finally {
    isGeneratingBackground.value = false
    loading.close()
  }
}

// 下载背景图
function downloadBackground(url) {
  const link = document.createElement('a')
  link.href = url
  link.download = `background_${Date.now()}.jpg`
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  ElMessage.success('背景图下载中...')
}

// 跳转到任务列表
function goToTaskList() {
  // 根据当前路由决定跳转路径
  const currentRoute = router.currentRoute.value
  if (currentRoute.path.includes('/transfer-all/')) {
    router.push('/transfer-all/task-list')
  } else {
    router.push('/mask-editor/task-list')
  }
}

onMounted(() => {
  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    setTimeout(resizeCanvasToImage, 100)
  })
})

onUnmounted(() => {
  window.removeEventListener('resize', resizeCanvasToImage)
})
</script>

<style scoped>
.background-editor {
  height: 100vh;
  background: #18181c;
  display: flex;
  flex-direction: column;
}



/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 左侧产品图片区域 */
.left-sidebar {
  width: 400px;
  background: #23232a;
  border-right: 1px solid #2a2a2a;
  padding: 24px;
  flex-shrink: 0;
  min-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 示例视频样式 */
.example-video-section {
  background: linear-gradient(135deg, #23232a, #2a2a2a);
  border-radius: 16px;
  border: 1px solid #3a3a3a;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.example-video-container {
  background: #141414;
}

.video-wrapper {
  position: relative;
}

.example-video {
  width: 100%;
  height: 180px;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.3s ease;
  display: block;
  background: #000;
}

.example-video:hover {
  transform: scale(1.02);
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(1px);
}

.play-overlay:hover {
  background: rgba(0, 0, 0, 0.6);
}

.play-button {
  width: 40px;
  height: 40px;
  background: rgba(64, 158, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  transition: all 0.3s ease;
  color: white;
}

.play-button:hover {
  background: rgba(64, 158, 255, 1);
  transform: scale(1.1);
}

.play-text {
  color: white;
  font-size: 11px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.video-description {
  padding: 12px 16px;
  background: #1a1a1a;
  border-top: 1px solid #2a2a2a;
}

.video-description p {
  margin: 0 0 4px 0;
  font-size: 11px;
  color: #909399;
  line-height: 1.3;
}

.video-description p:last-child {
  margin-bottom: 0;
}

.video-description .video-tips {
  color: #67c23a;
  font-weight: 500;
}

.product-section {
  height: 100%;
}

.section-title {
  margin: 0 0 20px 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.product-upload-area {
  height: 280px;
  position: relative;
}

.product-upload {
  height: 100%;
  width: 100%;
}

.upload-placeholder {
  height: 100%;
  background: #2a2a2a;
  border: 2px dashed #3a3a3a;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-placeholder:hover {
  border-color: #409eff;
  background: #2f2f2f;
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 12px;
  color: #909399;
}

.upload-text {
  color: #909399;
  font-size: 14px;
}

.product-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

/* 右侧背景选择区域 */
.right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #18181c;
  min-width: 0;
  overflow: hidden;
}

/* 背景选择Tab */
.background-tabs {
  display: flex;
  background: linear-gradient(135deg, #2a2a2a, #323232);
  padding: 6px;
  margin: 24px 24px 0 24px;
  border-radius: 12px;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid #3a3a3a;
}

.background-tab {
  flex: 1;
  padding: 12px 24px;
  background: transparent;
  color: #666666;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  font-weight: 500;
  font-size: 13px;
  position: relative;
  overflow: hidden;
}

.background-tab.active {
  background: linear-gradient(135deg, #2a2a2a, #333333);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.background-tab:hover:not(.active) {
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
  color: #ccc;
  transform: translateY(-1px);
}

/* 背景选择内容 */
.background-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  min-width: 0;
}

.background-content::-webkit-scrollbar {
  width: 8px;
}

.background-content::-webkit-scrollbar-track {
  background: #2a2a2a;
  border-radius: 4px;
}

.background-content::-webkit-scrollbar-thumb {
  background: #409eff;
  border-radius: 4px;
}

/* 背景选择样式 */
.background-section {
  margin-bottom: 40px;
  background: linear-gradient(135deg, #23232a, #2a2a2a);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid #3a3a3a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 4px;
}

.section-header h3 {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.more-btn {
  color: #909399;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.more-btn:hover {
  color: #409eff;
}

.background-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.upload-item,
.background-item {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  border: 2px solid transparent;
}

.upload-item {
  background: #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  border: 2px dashed #3a3a3a;
}

.upload-item:hover {
  border-color: #409eff;
  color: #409eff;
}

.upload-plus {
  font-size: 32px;
  font-weight: 300;
  color: #909399;
}

.background-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.background-item:hover img {
  transform: scale(1.05);
}

.background-item.selected {
  border-color: #409eff;
  box-shadow: 0 0 16px rgba(64, 158, 255, 0.4);
}

.background-item.selected::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: #409eff;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

/* 提示词生成样式 */
.prompt-container {
  max-width: 800px;
  margin: 0 auto;
}

.prompt-input-section {
  background: linear-gradient(135deg, #23232a, #2a2a2a);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 40px;
  border: 1px solid #3a3a3a;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.prompt-input-section h3 {
  margin: 0 0 16px 0;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.prompt-input-wrapper {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}

.prompt-input {
  flex: 1;
}

.generate-prompt-btn {
  height: 40px;
  padding: 0 24px;
  font-weight: 600;
}

.generated-section {
  margin-top: 32px;
}

.generated-section h3 {
  margin: 0 0 20px 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

/* 底部生成按钮 */
.bottom-action {
  height: 80px;
  background: #23232a;
  border-top: 1px solid #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

.generate-btn {
  min-width: 200px;
  height: 48px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.generate-icon {
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

/* 深度样式覆盖 */
:deep(.prompt-input .el-textarea__inner) {
  background: #1a1a1a !important;
  border: 1px solid #3a3a3a !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

:deep(.prompt-input .el-textarea__inner:focus) {
  border-color: #409eff !important;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2) !important;
}

:deep(.prompt-input .el-textarea__inner::placeholder) {
  color: #666 !important;
}
.sidebar {
  width: 480px;
  background: #23232a;
  padding: 24px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.product-image-section {
  margin-bottom: 24px;
}
.image-wrapper {
  position: relative;
  width: 350px;
  height: 350px;
  border-radius: 12px;
  overflow: hidden;
}
.upload {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.preview-img, .upload-placeholder {
  width: 350px;
  height: 350px;
  object-fit: contain;
  background: #222;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-placeholder {
  color: #aaa;
  font-size: 16px;
  text-align: center;
}
.tools {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
}
.slider-label {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  margin: 12px 0 6px 24px;
}
.canvas-main {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  max-height: calc(100vh - 200px);
  padding-bottom: 100px;
}
.canvas-bg-checkerboard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 500px;
  height: 580px;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(#222 0% 25%, #2a2a2a 0% 50%) 50% / 40px 40px;
  border-radius: 18px;
  z-index: 0;
}
.upload-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.upload-center-btn {
  width: 280px;
  min-height: 180px;
  background: #23232a;
  color: #aaa;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  border: 1.5px dashed #444;
  transition: border-color 0.2s;
  gap: 16px;
  padding: 24px;
}
.upload-center-btn:hover {
  border-color: #409eff;
}
.canvas-header {
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  padding: 20px 0;
  border-bottom: 1px solid #2a2a2a;
  margin-bottom: 20px;
}

/* Tab 切换样式 */
.tab-container {
  margin-bottom: 24px;
}

.tab-buttons {
  display: flex;
  background: #2a2a2a;
  border-radius: 8px;
  padding: 4px;
  gap: 4px;
  justify-content: center;
  max-width: 400px;
  margin: 0 auto;
}

.tab-button {
  flex: 1;
  padding: 12px 24px;
  background: transparent;
  color: #909399;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
}

.tab-button.active {
  background: #409eff;
  color: #fff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.tab-button:hover:not(.active) {
  background: #3a3a3a;
  color: #fff;
}

/* Tab 内容样式 */
.tab-content {
  height: calc(100vh - 200px);
  overflow-y: auto;
  padding: 0 20px;
}

.tab-content::-webkit-scrollbar {
  width: 8px;
}

.tab-content::-webkit-scrollbar-track {
  background: #2a2a2a;
  border-radius: 4px;
}

.tab-content::-webkit-scrollbar-thumb {
  background: #409eff;
  border-radius: 4px;
}

/* 背景选择样式 */
.background-section {
  margin-bottom: 40px;
  background: linear-gradient(135deg, #23232a, #2a2a2a);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid #3a3a3a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 4px;
}

.section-header h3 {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.more-btn {
  color: #909399;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.more-btn:hover {
  color: #409eff;
}

.background-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.upload-item,
.background-item {
  aspect-ratio: 3/2;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  border: 2px solid transparent;
}

.upload-item {
  background: #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  border: 2px dashed #3a3a3a;
}

.upload-item:hover {
  border-color: #409eff;
  color: #409eff;
}

.background-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.background-item:hover img {
  transform: scale(1.05);
}

.background-item.selected {
  border-color: #409eff;
  box-shadow: 0 0 16px rgba(64, 158, 255, 0.4);
}

.background-item.selected::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: #409eff;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.background-item:hover .background-overlay {
  opacity: 1;
}

/* 提示词生成样式 */
.prompt-container {
  max-width: 800px;
  margin: 0 auto;
}

.prompt-input-section {
  background: linear-gradient(135deg, #23232a, #2a2a2a);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 40px;
  border: 1px solid #3a3a3a;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.prompt-input-section h3 {
  margin: 0 0 16px 0;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.prompt-input-wrapper {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}

.prompt-input {
  flex: 1;
}

.generate-prompt-btn {
  height: 40px;
  padding: 0 24px;
  font-weight: 600;
}

.generated-section {
  margin-top: 32px;
}

.generated-section h3 {
  margin: 0 0 20px 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

/* 深度样式覆盖 */
:deep(.prompt-input .el-textarea__inner) {
  background: #1a1a1a !important;
  border: 1px solid #3a3a3a !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

:deep(.prompt-input .el-textarea__inner:focus) {
  border-color: #409eff !important;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2) !important;
}

:deep(.prompt-input .el-textarea__inner::placeholder) {
  color: #666 !important;
}
.mask-canvas {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 12px;
  background: transparent;
  cursor: crosshair;
  pointer-events: auto;
}
.canvas-actions {
  position: absolute;
  right: 32px;
  bottom: 32px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.canvas-footer-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: #23232a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 32px 8px 32px;
  z-index: 20;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 -2px 12px #0003;
  height: 80px;
}
.footer-left, .footer-center, .footer-right {
  display: flex;
  align-items: center;
}
.footer-center {
  flex: 1;
  justify-content: center;
}
.generate-btn {
  min-width: 280px;
  height: 56px;
  font-size: 20px;
  font-weight: 700;
  margin: 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #00e676, #00c853) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(0, 230, 118, 0.4) !important;
  transition: all 0.3s ease !important;
}
.generate-btn:hover {
  background: linear-gradient(135deg, #00c853, #00e676) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0, 230, 118, 0.6) !important;
}
.free-label {
  background: #00e676;
  color: #fff;
  font-size: 13px;
  border-radius: 8px;
  padding: 2px 10px;
  margin-left: 10px;
  font-weight: 600;
}
.footer-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.template-btn, .task-list-btn {
  min-width: 120px;
  font-size: 16px;
  font-weight: 600;
  background-color: #333;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.template-btn::before {
  content: "📄";
}
.task-list-btn {
  background: #409eff !important;
  border: none !important;
  color: #fff !important;
  min-width: 140px;
  font-size: 14px;
  font-weight: 500;
}
.task-list-btn:hover {
  background: #66b1ff !important;
}
.product-mask-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 350px;
  height: 350px;
  cursor: crosshair;
  z-index: 2;
  border-radius: 12px;
  background: transparent;
  pointer-events: auto;
}
.preview-img {
  width: 350px;
  height: 350px;
  object-fit: contain;
  background: #222;
  border-radius: 12px;
  display: block;
  position: relative;
  z-index: 1;
}
.upload-placeholder {
  width: 350px;
  height: 350px;
  object-fit: contain;
  background: #222;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 16px;
  text-align: center;
}

/* 统一的上传按钮样式 */
.upload-product-btn-prominent,
.upload-model-btn-prominent,
.select-digital-human-btn-prominent {
  background: linear-gradient(135deg, #409eff, #66b1ff) !important;
  border: none !important;
  color: #fff !important;
  padding: 14px 28px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.4) !important;
  transition: all 0.3s ease !important;
  margin-bottom: 10px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.upload-product-btn-prominent:hover,
.upload-model-btn-prominent:hover,
.select-digital-human-btn-prominent:hover {
  background: linear-gradient(135deg, #66b1ff, #409eff) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(64, 158, 255, 0.6) !important;
}

/* 产品图上传区域样式调整 */
.upload-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 350px;
  width: 350px;
  padding: 20px;
  box-sizing: border-box;
}

/* 示例视频样式 */
.example-video-section {
  background: #1f1f1f;
  border-radius: 8px;
  border: 1px solid #2a2a2a;
  overflow: hidden;
  margin-bottom: 20px;
  
  h3 {
    margin: 0;
    padding: 20px 24px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid #2a2a2a;
  }

  .example-video-container {
    background: #141414;
    
    .video-wrapper {
      position: relative;
      
      .example-video {
        width: 100%;
        height: 220px;
        object-fit: contain;
        cursor: pointer;
        transition: transform 0.3s ease;
        display: block;
        background: #000;
      }

      .example-video:hover {
        transform: scale(1.02);
      }

      .play-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        backdrop-filter: blur(1px);

        &:hover {
          background: rgba(0, 0, 0, 0.6);
        }

        .play-button {
          width: 50px;
          height: 50px;
          background: rgba(64, 158, 255, 0.9);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 8px;
          transition: all 0.3s ease;
          color: white;

          &:hover {
            background: rgba(64, 158, 255, 1);
            transform: scale(1.1);
          }
        }

        .play-text {
          color: white;
          font-size: 12px;
          font-weight: 500;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }
      }
    }

    .video-description {
      padding: 12px 16px;
      background: #1a1a1a;
      border-top: 1px solid #2a2a2a;

      p {
        margin: 0 0 6px 0;
        font-size: 12px;
        color: #909399;
        line-height: 1.4;

        &:last-child {
          margin-bottom: 0;
        }

        &.video-tips {
          color: #67c23a;
          font-weight: 500;
        }
      }
    }
  }
}
</style>
